<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片裁剪</title>
		<style type="text/css">
	        /*主容器*/
	        .container{
	            width: 90%;
	            margin-top: 20px;
	        }
	        /*图片预览容器*/
	        .container .img-prev-container{
	            width: 200px;
	            height: 100px;
	            margin:10px auto;
	            border:1px solid #ccc;
	        }
	        /*预览图片样式*/
	        .container .img-prev-container img{
	            width: 100%;
	            height: 100%;
	        }
	    </style>
	</head>
	<body>
		<div class="container">
	        <div id="img-prev-container" class="img-prev-container">
	        </div>
        	<input type="file" value="请选择图片" id="fileSelecter" />
    	</div>
	</body>
	<script>
		
		var imgContainer = GetDomById('img-prev-container');
		//添加预览图片到容器框
		var imgs = imgContainer.getElementsByTagName('img');
		var reader = new FileReader();//FileReader 读取文件用的
		//触发change事件
		GetDomById('fileSelecter').onchange = function (event) {
			//获取文件对象
			var file = event.target.files[0];//event.target捕获当前事件的对象
			
			//读取完成后触发 这些传递进来的event对象
			reader.onload = function (ev) {
				//获取图片的url
				//傻逼教程= =
				var img_src = ev.target.result;
				console.log(ev.target);
				console.log(ev.target.result);
				if(!imgs.length){
					var img = document.createElement('img');
					img.setAttribute('src',img_src);
					GetDomById('img-prev-container').appendChild(img);
				}else{
					imgs[0].setAttribute('src',img_src);
				}
			}
			//获取到数据的url 图片将转成 base64 格式
        	reader.readAsDataURL(file);//有了这个才有result属性
        	console.log(reader);
		}
		
		//添加拖放功能 拖曳一个对象到目标对象上触发的事件
		imgContainer.addEventListener('dragover',function(ev){
			ev.preventDefault();//阻止默认事件 谷歌会直接将图片用浏览器打开
		},false);
		//记得某个版本无法绑定多个事件？ 拖放事件结束时触发的事件
		imgContainer.addEventListener('drop',function(ev){
			ev.preventDefault();
			//读取文件时完成时触发
			reader.onload = function(ev){
				var img_src = ev.target.result;
				showImg(img_src);
			}
			//将文件读取为dataurl参数
			 reader.readAsDataURL(ev.dataTransfer.files[0])//拖曳数据对象
		})
		//展示图片
		function showImg(img_src){
			if(!imgs.length){
				var img = document.createElement('img');
				img.setAttribute('src',img_src);
				GetDomById('img-prev-container').appendChild(img);
			}else{
				imgs[0].setAttribute('src',img_src);
			}
		}
		//简化 document.getElementById() 函数
		function GetDomById(id){
		    return document.getElementById(id);
		}
		/*Ver1.0 因为没做限制 添加图片会一直生成一个节点
		//触发change事件并传入事件对象所带来的信息 但是这个event对象又是哪里来的
		GetDomById('fileSelecter').onchange = function (event) {
			//获取文件对象
			console.log(event);
			var file = event.target.files[0];//event.target捕获当前事件的对象
			//创建reader对象
			console.log(file);
			var reader = new FileReader();
			
			//读取完成后触发 这些传递进来的event对象
			reader.onload = function (ev) {
				//获取图片的url
				console.log(ev);
				var img_src = ev.target.result;
				console.log(img_src);
				//添加预览图片到容器框
				var img = document.createElement('img');
				img.setAttribute('src',img_src);
				GetDomById('img-prev-container').appendChild(img);
			}
			//获取到数据的url 图片将转成 base64 格式
        	reader.readAsDataURL(file);
		}
		//简化 document.getElementById() 函数
		function GetDomById(id){
		    return document.getElementById(id);
		}
		*/
	</script>
</html>
